<mat-card>
  <mat-card-title>
    Weight
  </mat-card-title>
  <mat-card-content>
    <mat-form-field fxFill>
      <input
        (change)="onWeightChanged()"
        [(ngModel)]="athleteSettingsModel.weight"
        matInput
        placeholder="Weight in kilograms"
        type="number"/>
    </mat-form-field>
  </mat-card-content>
</mat-card>
<mat-card>
  <mat-card-title>
    Max heart rate
  </mat-card-title>
  <mat-card-content>
    <div class="pad-lrg-bt clickable">
      <button (click)="maxHrHint.style.display = 'block'; $event.target.hidden = true" color="accent" mat-button>
        How to setup max heart rate
      </button>
    </div>
    <div #maxHrHint [style.display]="'none'" class="hint">
      Enter your max heart rate measured at full throttle. If you're not aware of your max heart rate you can
      enter "220 bpm <strong>-</strong> YOUR_AGE" as <strong>temporally</strong> value and think to measure it for
      real.
    </div>
    <mat-form-field fxFill>
      <input
        (change)="onMaxHrChanged()"
        [(ngModel)]="athleteSettingsModel.maxHr"
        matInput
        type="number"/>
      <mat-placeholder>
        Your max HR in bpm
      </mat-placeholder>
    </mat-form-field>
  </mat-card-content>

  <mat-card-title>
    Rest heart rate
  </mat-card-title>
  <mat-card-content>
    <div class="pad-lrg-bt clickable">
      <button (click)="restHrHint.style.display = 'block'; $event.target.hidden = true" color="accent" mat-button>
        How to setup rest heart rate
      </button>
    </div>
    <div #restHrHint [style.display]="'none'" class="hint">
      Enter your rest heart rate. Lie down in your bed and measure the lower value with an hear rate monitor or <a
      href="https://www.youtube.com/watch?v=JQwc-DtY5zA" target="_blank">like this</a>.
    </div>
    <mat-form-field fxFill>
      <input
        (change)="onRestHrChanged()"
        [(ngModel)]="athleteSettingsModel.restHr"
        matInput
        type="number"/>
      <mat-placeholder>
        Your rest HR in bpm
      </mat-placeholder>
    </mat-form-field>
  </mat-card-content>

  <mat-card-title>
    Lactate Threshold Heart Rate (LTHR)
  </mat-card-title>
  <mat-card-content>
    <div class="pad-lrg-bt clickable">
      <button (click)="lthrHint.style.display = 'block'; $event.target.hidden = true" color="accent" mat-button>
        How to setup LTHR
      </button>
    </div>
    <div #lthrHint [style.display]="'none'" class="hint">
      The LTHR is the point, above which, increased blood acidification occurs in your body. Above this
      threshold your endurance performance will rapidly decrease.<br/>To find your LTHR do a 30 minutes Time
      Trial <strong>alone</strong>. Perform this TT like if it was a race. At 10 minutes elapsed into the test,
      start measuring your heart rate until the end. When done, check your average heart rate on these last 20
      minutes. This value is your LTHR.
    </div>
    <div fxLayout="column" fxLayoutAlign="start center">
      <mat-form-field fxFill>
        <input (change)="onLTHRChanged()"
               [(ngModel)]="athleteSettingsModel.lthr.default"
               matInput
               type="number"/>
        <mat-placeholder>
          Default LTHR in bpm
          {{(!athleteSettingsModel.lthr.default) ? '(currently ' +
          (athleteSettingsModel.restHr + DEFAULT_LTHR_KARVONEN_HRR_FACTOR *
            (athleteSettingsModel.maxHr -
              athleteSettingsModel.restHr)).toFixed(0) + ' bpm)' : ''}}
        </mat-placeholder>
      </mat-form-field>
      <span fxFlex="1"></span>
      <mat-form-field fxFill>
        <input (change)="onCyclingLTHRChanged()"
               [(ngModel)]="athleteSettingsModel.lthr.cycling"
               matInput
               type="number"/>
        <mat-placeholder>
          Cycling LTHR in bpm {{(!athleteSettingsModel.lthr.cycling) ? '(using default LTHR)' : ''}}
        </mat-placeholder>
      </mat-form-field>
      <span fxFlex="1"></span>
      <mat-form-field fxFill>
        <input (change)="onRunningLTHRChanged()"
               [(ngModel)]="athleteSettingsModel.lthr.running"
               matInput
               type="number"/>
        <mat-placeholder>
          Running LTHR in bpm {{(!athleteSettingsModel.lthr.running) ? '(using default LTHR)' : ''}}
        </mat-placeholder>
      </mat-form-field>
    </div>
    <div *ngIf="!athleteSettingsModel.lthr.default">
			<span>
				<mat-icon [style.vertical-align]="'bottom'" color="warn"
                  fontSet="material-icons-outlined">warning</mat-icon>
				Since no default lactate threshold heart rate is currently defined. The value being used by default
				is <strong>{{(athleteSettingsModel.restHr + DEFAULT_LTHR_KARVONEN_HRR_FACTOR * (athleteSettingsModel.maxHr - athleteSettingsModel.restHr)).toFixed(0)}}
        bpm</strong> or 85% of your <i>Heart Rate Reserve</i> using the Karvonen method.
			</span>
    </div>
  </mat-card-content>
</mat-card>
<mat-card>
  <mat-card-title>
    Cycling Functional Threshold Power (FTP)
  </mat-card-title>
  <mat-card-content>
    <div class="pad-lrg-bt clickable">
      <button (click)="cyclingFtpHint.style.display = 'block'; $event.target.hidden = true" color="accent"
              mat-button>How to setup cycling
        FTP
      </button>
    </div>
    <div #cyclingFtpHint [style.display]="'none'" class="hint">
      The FTP is the constant average power you are able to maintain during 1 hour. To measure it you must perform
      a full power test during 20min on your bike. Take the average power measured on the period and multiply it
      by 0.95. This is your FTP.
      Example: an average power of 200 watts will give a FTP of 190 watts. Measuring your FTP every 4 or 6 weeks
      is a good practice.
      To help you in this measurement process, you can use the "Best 20min Power" stat data-field on your strava
      activities.
    </div>
    <div>
      <mat-form-field fxFill>
        <input
          (change)="onCyclingFtpChanged()"
          [(ngModel)]="athleteSettingsModel.cyclingFtp" matInput max="999"
          min="1"
          placeholder="Your cycling FTP in watts"
          type="number"/>
      </mat-form-field>
    </div>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>
    Running Functional Threshold Pace
  </mat-card-title>
  <mat-card-content>
    <div class="pad-lrg-bt clickable">
      <button (click)="runningFtpHint.style.display = 'block'; $event.target.hidden = true" color="accent"
              mat-button>How to setup running
        FTP
      </button>
    </div>
    <div #runningFtpHint [style.display]="'none'" class="hint">
      The Running Functional Threshold Pace is the maximal running pace an athlete can hold during an effort of
      approximately 45-60min. To measure your running FTP, choose your latest recent race or hard training run of
      10-15km. If 10km time was greater than 45 min, then use average pace held on 10km. However, if 10km time
      was less than 45min, then use average pace held on 15km or half marathon. Learn
      more about determining running functional threshold pace <a
      href="https://www.trainingpeaks.com/blog/determining-functional-threshold-pace-ftp/"
      target="_blank">here</a>.
    </div>
    <div>
      <div fxLayout="row" fxLayoutAlign="start center">
        <mat-form-field fxFlex="75">
          <input
            (change)="onRunningFtpChanged()"
            [(ngModel)]="athleteSettingsModel.runningFtp" matInput max="999"
            min="1"
            placeholder="Your running FTP in seconds"
            type="number"/>
        </mat-form-field>
        <span fxFlex="1"></span>
        <mat-form-field fxFlex>
          <input
            [disabled]="true"
            [value]="convertToPace('metric')"
            matInput
            placeholder="Metric pace"/>
        </mat-form-field>
        <span fxFlex="1"></span>
        <mat-form-field fxFlex>
          <input
            [disabled]="true"
            [value]="convertToPace('imperial')"
            matInput
            placeholder="Imperial pace"/>
        </mat-form-field>
      </div>
    </div>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>
    Swimming Functional Threshold Pace
  </mat-card-title>
  <mat-card-content>
    <div fxLayout="row" fxLayoutAlign="center center">
      <mat-form-field fxFlex>
        <input
          (change)="onSwimFtpChanged()"
          [(ngModel)]="athleteSettingsModel.swimFtp"
          matInput max="9999" min="0"
          step="0.2"
          type="number"/>
        <mat-placeholder>
          Enter <strong>meters / min (e.g. 65)</strong>
        </mat-placeholder>
      </mat-form-field>
      <span fxFlex="1"></span>
      <mat-form-field fxFlex>
        <input
          (change)="onSwimFtp100mChanged()"
          [(ngModel)]="swimFtp100m"
          matInput
          type="text"/>
        <mat-placeholder>
          OR enter as <strong>hh:mm:ss / 100 meters (e.g. 00:01:32)</strong>
        </mat-placeholder>
      </mat-form-field>
    </div>

    <!-- Calculator -->
    <mat-slide-toggle
      (change)="onSwimFtpCalculatorEnabled();"
      [(ngModel)]="isSwimFtpCalculatorEnabled"
      aria-label="Show swim ftp calculator"
      class="swim-ftp-calculator-toggle">
      Show swim ftp calculator
    </mat-slide-toggle>


    <ng-container *ngIf="isSwimFtpCalculatorEnabled">

      <h2 class="mat-title">Swimming Functional Threshold Pace Calculator</h2>
      <app-swim-ftp-helper (swimFtpChange)="athleteSettingsModel.swimFtp=$event; onSwimFtpChanged();"
                           [swimFtp]="athleteSettingsModel.swimFtp"></app-swim-ftp-helper>
    </ng-container>

    <div #bottom></div>

  </mat-card-content>
</mat-card>
